<template>
  <f7-list meate class="qm-remind qm-list">
    <f7-list-item link="#" class="qm-list-item">
      <div slot="media" v-if="icon">
        <div class="remind-title">
          <img :src="icon" alt="">
        </div>
      </div>
      {{ title }}
    </f7-list-item>
  </f7-list>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    icon: String
  },
}
</script>

<style lang="less" scoped>
.qm-remind {
  border-radius: calc(16px * var(--ratio));
  overflow: hidden;
  margin-bottom: 0;

  /deep/ ul {
    background: #f7fcff;

    .remind-title {
      width: calc(67px * var(--ratio));
      height: calc(52px * var(--ratio));

      &>img {
        width: 100%;
        height: 100%;
      }
    }

    .item-inner {
      color: var(--color-text-main);
      font-size: var(--font-size-subcontent);
    }
  }
}
</style>
